<template>
	<view class="main_box">
		<view class="fix_title">
			{{stepTitle}}
		</view>
		<view v-if="step == 1" class="">
			<view class="portrait" @click="_changeImg">
				<view class="portrait_img">
					<image :src="img1" mode="aspectFit"></image>
				</view>
				<view class="btn_box" style="margin: 0;">
					<button class="submitBtn radius_btn">采集人像</button>
				</view>
			</view>
			<view>
				<view class="portrait_hint">
					<text>采集拍摄须知</text>
				</view>
				<view class="hint_text">
					<view>
						1.采集人像请确保是本人操作，避免不必要的损失和麻烦;
					</view>
					<view>
						2.采集时面部无遮挡物，不佩戴墨镜等深色镜片的眼镜;
					</view>
					<view>
						3.采集时请确保光线充足，能清晰看见五官轮廓;
					</view>
				</view>
			</view>
			<view class="agreeProfile">
				<view :class="sign?'crcle':'crcle2'" @click="myArgee">
				</view>
				<view class="box">
					<text>您知悉并同意服务提供者授权按照《隐私政策》实施个人信息收集 ，详见 <text style="color: #3F9BFB;"
							@click="knowUser">《隐私政策》</text> </text>
				</view>

			</view>
			<!-- <view class="btn_box">
				<button class="submitBtn radius_btn" form-type="submit" @click="_upLoadPortrait">下一步</button>
			</view> -->
		</view>

		<view class="kdn">
			<image src="/static/images/blank/4341yu.png" mode=""></image>
			<view class="subx">
				交通银行 提供产品服务
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import {
		queryStudentCardBalance,
		upFaceImg,
		getFaceImg,
		updateFaceImg,
		getWxJsApiSignature,
		upFaceImgApp
	} from '../../common/api/index.js';
	import {
		v4 as uuidv4
	} from "uuid";
	import customModal from '../../components/custom-modal/custom-modal.vue';
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	// #ifdef H5
	import wx from '../../common/js/wx-js-sdk.js';
	// #endif
	import {
		imgURL,
		requestURL
	} from '../../common/utils/config.js'
	import {
		_showLoading,
		_showToast
	} from '../../common/js/util.js'
	import {
		getPhoneCode,
		getTwoUserList,
		putIdentity,
		personFace,
		getH5FaceCheckGetUrl
	} from '../../common/api/blank.js';
	export default {
		data() {
			return {
				sign: true,
				step: 1,
				userPortrait: '',
				userInfo: {
					imgFile: '',
					localId: '',
					idCard: "",
					empId: "",
					name: "",
					orgId: "",
					mediaId: '',
					appId: uni.getStorageSync('str1')
				},
				content: '',
				title: '',
				showMcModal: false,
				content1: '',
				title1: '',
				showMcModal1: false,
				isSound: true,
				AutoClip: true,
				backCamera: false,
				isPhone: false,
				img1: '/static/images/get_portrait.png',
				imgUpAddress: "",
				base64ImageCrop: '',
				base64Image: '',
				permissionsStatus: false,
				setFaceConfigStatus: false,
				collectionIs: 0,
				imageList: [], // 本地图片路径
				imageBase64List: [], // base64格式的图片
				// imageOrderNo: "",
				off1: false, //节流开关
			}
		},
		components: {
			customModal,
			tmcModal
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false
			}
			this.back();
			return true
		},
		onLoad() {
			var h_userId = uni.getStorageSync("s_userId");
			// console.log(h_userId)
			this.userInfo.orgId = uni.getStorageSync("orgId")
		},
		methods: {
			_getH5FaceCheckGetUrl() {
				return new Promise((reslove, reject) => {
					var h_userId = uni.getStorageSync("s_userId");
					var h_idNo = uni.getStorageSync("idNo");
					var h_userName = uni.getStorageSync("userName");
					var h_orgId = uni.getStorageSync("orgId")
					var h_sex = uni.getStorageSync("sex")
					var h_validDate = uni.getStorageSync("validDate")
					var backUrl = "/pageBlank/supplementary/supplementary"
					var h_liveAddress=uni.getStorageSync("liveAddress")
					//自生成人脸流水号
					let orderNo = uuidv4().replace(/-/g, "")
					uni.setStorageSync('orderNo', orderNo);
					getH5FaceCheckGetUrl({
						facetype:'OPEN_ACCOUNT_THREE',
						orderNo:orderNo,
						userName:h_userName,
						idNo:h_idNo,
						orgId:this.userInfo.orgId,
						back_url: `xiaojiao://sndCard.com?path=${backUrl}`
					}).then((res) => {
						// console.log(res)
						reslove(res.data)
					})
				})
			},
			knowUser() {
				uni.navigateTo({
					url: "/pageBlank/components/agreement?url=face_privacy_policy.html&title=隐私政策"
				})
			},
			myArgee() {
				this.sign = !this.sign
			},
			back() {
				var pages = getCurrentPages();
				uni.navigateBack()
			},
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			async _changeImg() {
				if (this.sign) {
					uni.showToast({
						icon: "none",
						title: "需同意隐私政策"
					})
					return
				}
				try {
					let res = await this._getH5FaceCheckGetUrl()
					console.log(res)
					if (res) {
						if ('url' in res) {
							// plus.runtime.openWeb(res.url)
							uni.navigateTo({
								url:"/pageBlank/h5webview/h5webview?src="+res.url
							})
							// plus.runtime.openURL(res.url)
						} else {
							uni.showToast({
								icon: "error",
								title: res
							})
						}
					} else {
						uni.showToast({
							icon: "error",
							title: res
						})
					}

				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						icon: "none",
						title:"代码异常"
					})
				}
			},
			// btnSave() {
			// 	if (uni.getStorageSync("collectionFlag") == 'fail') {
			// 		uni.showToast({
			// 			icon: "none",
			// 			title: "需先采集人脸信息"
			// 		})
			// 		return
			// 	}
			// 	var h_userId = uni.getStorageSync("s_userId");
			// 	var h_idNo = uni.getStorageSync("idNo");
			// 	var h_userName = uni.getStorageSync("userName");
			// 	var h_orgId = uni.getStorageSync("orgId")
			// 	var h_sex = uni.getStorageSync("sex")
			// 	var h_validDate = uni.getStorageSync("validDate")
			// 	var h_liveAddress = uni.getStorageSync("liveAddress")
				// let livingOrderNo = uuidv4().replace(/-/g, "")
				// uni.setStorageSync('livingOrderNo', livingOrderNo);
			// 	uni.navigateTo({
			// 		url: `/pageBlank/supplementary/supplementary?sex=${h_sex}&idNo=${h_idNo}&userName=${h_userName}&validDate=${h_validDate}&liveAddress=${h_liveAddress}`
			// 	})
			// },
			// _upLoadPortrait() {
			// 	this.btnSave()
			// },
		},
		computed: {
			stepTitle() {
				return this.step == 1 ? '3/8人像采集' : this.step == 2 ? '3/8人像采集' : '3/8采集完成'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main_box {
		padding: 24upx;
		// height: 100vh;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.agreeProfile {
		display: flex;
		justify-content: center;
		margin-top: 60rpx;
		display: flex;
		box-sizing: border-box;

		.box {
			width: 600rpx;
			font-size: 26rpx;
			font-family: Segoe UI-Regular, Segoe UI;
			font-weight: 400;
			color: #475263;
		}

		.crcle2 {
			margin-top: 5rpx;
			box-sizing: border-box;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			opacity: 1;
			border: 8rpx solid #3478F5;
			margin-right: 8rpx;
		}

		.crcle {
			margin-top: 5rpx;
			width: 26rpx;
			height: 26rpx;
			opacity: 1;
			border-radius: 50%;
			border: 1rpx solid #3478F5;
			margin-right: 8rpx;
		}

	}

	.kdn {
		margin: 86rpx 0rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		>image {
			width: 34rpx;
			height: 33rpx;
		}

		.subx {
			margin-left: 8rpx;
			height: 34rpx;
			font-size: 23rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #003A79;
			line-height: 34rpx;
		}
	}

	.info_item {
		padding: 24upx;
		background: #F7F6FB;
		margin: 24upx 0;
	}

	.fix_title {
		margin: 30upx 0 60upx 0;
		font-size: 40upx;
		font-weight: bolder;
		display: flex;
		align-items: center;

		&::before {
			content: '';
			height: 36upx;
			width: 12upx;
			background-image: linear-gradient(to bottom, #c3defc, #007AFF);
			margin-right: 12upx;
			border-radius: 6upx;
		}
	}

	.submitBtn {
		margin: 0 24upx;
		border-width: 0px;
		height: 90upx;
		line-height: 90upx;
		background: inherit;
		background-color: $uni-color-primary;
		box-sizing: border-box;
		border-width: 0;
		// border-style: solid;
		// border-color: rgba(242, 242, 242, 1);
		border-radius: 6upx;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		color: #FFFFFF;

		&.radius_btn {
			border-radius: 45upx;
			box-shadow: 0px 8px 9px 0px #c3defc;
		}

		&.plain {
			background: transparent;
			border: 1px solid #c3defc;
			color: #333;

			&:active {
				background-color: #c3defc;
			}
		}

		&:active {
			background-color: #3266a5;
		}

		&::after {
			border: none;
		}
	}

	.portrait {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin: 48upx 0;
	}

	.portrait_img {
		text-align: center;

		image {
			width: 320upx;
			height: 320upx;
			border-radius: 10upx;
			overflow: hidden;
		}
	}

	.portrait_hint {
		font-weight: bolder;
		font-size: 30upx;
		margin: 24upx 0;

		&.portrait_hint_center {
			text-align: center;
		}
	}

	.hint_text {
		font-size: 24upx;
		color: #999;
		line-height: 36upx;
	}

	.btn_box {
		margin-top: 100upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
</style>